<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kertext UI框架示例页面</title>
    <link rel="stylesheet" href="kertext.css">
</head>

<body>
    <div class="kertext-container">
        <h1 class="kertext-heading">这是一个Kertext UI框架的示例页面</h1>
        <h2 class="kertext-subheading">介绍</h2>
        <p class="kertext-paragraph">Kertext是一个基于CSS的UI框架，提供了许多常用的CSS样式和组件，可以快速构建美观的网页界面。</p>
        <p class="kertext-paragraph kertext-quote">Kertext UI主要为文本阅读界面提供样式支持。</p>

        <hr class="kertext-hr-empty" />

        <h2 class="kertext-subheading">白色主题/黑色主题</h2>
        <a class="kertext-button" id="theme-switcher">切换主题</a>

        <hr class="kertext-hr-empty" />

        <h2 class="kertext-subheading">多级标题</h2>
        <h1 class="kertext-heading">一级标题</h1>
        <h2 class="kertext-heading2">二级标题</h2>
        <h3 class="kertext-heading3">三级标题</h3>
        <h4 class="kertext-heading4">四级标题</h4>
        <h5 class="kertext-heading5">五级标题</h5>
        <h6 class="kertext-heading6">六级标题</h6>

        <hr class="kertext-hr-empty" />

        <h2 class="kertext-subheading">按钮</h2>
        <a href="#" class="kertext-button">默认按钮</a>
        <a href="#" class="kertext-button-primary">主要按钮</a>
        <a href="#" class="kertext-button-success">成功按钮</a>
        <a href="#" class="kertext-button" style="background-color: #ff6600;">自定义颜色</a>

        <hr class="kertext-hr-empty" />

        <h2 class="kertext-subheading">表格</h2>
        <table class="kertext-table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>22</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>赵六</td>
                    <td>24</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>

        <hr class="kertext-hr-empty" />

        <h2 class="kertext-subheading">表单</h2>
        <form class="kertext-form">
            <label class="kertext-form-label" for="name">姓名：</label>
            <input class="kertext-form-input" type="text" id="name" name="name">

            <label class="kertext-form-label" for="email">邮箱：</label>
            <input class="kertext-form-input" type="email" id="email" name="email">

            <label class="kertext-form-label" for="message">留言：</label>
            <textarea class="kertext-form-textarea" id="message" name="message"></textarea>

            <label class="kertext-form-label" for="gender">性别：</label>
            <select class="kertext-form-select" id="gender" name="gender">
                <option value="male">男</option>
                <option value="female">女</option>
            </select>

            <button class="kertext-form-button" type="submit">提交</button>
        </form>

        <hr class="kertext-hr-empty" />

        <h2 class="kertext-subheading">卡片</h2>
        <div class="kertext-card">
            <div class="kertext-card-header">这是一个卡片的标题</div>
            <div class="kertext-card-body">
                <p>这是一个卡片的内容，可以放置文字、图片、按钮等元素。</p>
                <a href="#" class="kertext-button">查看详情</a>
            </div>
        </div>
        <h2 class="kertext-subheading">代码区块</h2>
        <div class="kertext-code">
            //这是一段代码<br />
            print("Hello World.");
        </div>

        <hr class="kertext-hr-empty" />

        <h2 class="kertext-subheading">警告框</h2>
        <div class="kertext-alert kertext-alert-success">成功提示：操作成功！</div>
        <div class="kertext-alert kertext-alert-warning">警告提示：请注意数据安全！</div>
        <div class="kertext-alert kertext-alert-danger">错误提示：操作失败，请稍后重试！</div>

        <hr class="kertext-hr-empty" />

        <h2 class="kertext-subheading">分页</h2>
        <div class="kertext-pagination">
            <span class="kertext-pagination-item">&laquo;</span>
            <span class="kertext-pagination-item active">1</span>
            <span class="kertext-pagination-item">2</span>
            <span class="kertext-pagination-item">3</span>
            <span class="kertext-pagination-item">4</span>
            <span class="kertext-pagination-item">5</span>
            <span class="kertext-pagination-item">6</span>
            <span class="kertext-pagination-item">7</span>
            <span class="kertext-pagination-item">8</span>
            <span class="kertext-pagination-item">9</span>
            <span class="kertext-pagination-item">&hellip;</span>
            <span class="kertext-pagination-item">20</span>
            <span class="kertext-pagination-item">&raquo;</span>
        </div>

    </div>

    <script>
        // 主题切换
        document.getElementById('theme-switcher').addEventListener('click', function () {
            var body = document.body;
            if (body.getAttribute('data-theme') === 'dark') {
                body.removeAttribute('data-theme');
            } else {
                body.setAttribute('data-theme', 'dark');
            }
        });
    </script>
</body>

</html>